<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算语法</title>
</head>

<body>

    <div id="text">
        <!-- 过于麻烦繁琐 -->
        <h2>总价格：{{books[0].price + books[1].price + books[2].price}}</h2>

        <!-- reduce()  -->
        <h2>总价格：{{totalPrice}}</h2>

    </div>

    <script src="./js/vue.min.js"></script>
    <script>
        const  app = new Vue({
            el: '#text',
            data: {
                books: [
                    {id: 110, name: "Unix编程艺术", price: 119},
                    {id: 111, name: "代码大全", price: 98},
                    {id: 112, name: "深入理解计算机原理", price: 139},
                    {id: 113, name: "现代操作系统", price: 199}
                ]
            },
            computed:{
                totalPrice: function() {
                    // return this.books.reduce()
                    let result = 0
                    console.log(result)
                    for (let i=0;i<this.books.length;i++){
                        result += this.books[i].price
                    }
                    return result
                    alert(result)
                    console.log(result)
                }
            }
        })


    </script>
</body>

</html>